<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<link rel="stylesheet" href="../../../../../css/base.css">
		<style type="text/css" >
			fieldset{ padding: 20px; font-family: 'Microsoft Yahei';}
			.control-group{ margin-bottom: 10px; }
			.xcr,
			#control_calc_ins strong{ color: #E26F50; }
			#control_calc_ins p,
			#control_calc_ins ol li{ font-size: 12px; margin: 10px 0; }
			#ins_close_btn { position: fixed; top: 10px; right: 20px; }
		</style>
	</head>
	<body>
		<fieldset>
			<form class="form-horizontal">
				<div class="control-group">
					<label for="control_calc_title"><var id="lang_control_title"></var> <span class="xcr">*</span></label>
					<input type="text" id="control_calc_title">
				</div>
				<div class="control-group">
					<label for="control_calc_width"><var id="lang_control_style"></var></label>
					<div class="input-group">
						<input type="text" id="control_calc_width">
						<span class="input-group-addon"><var id="lang_control_width"></var></span>
					</div>
				</div>
				<div class="control-group">
					<label for="control_calc_prec"><var id="lang_calc_prec"></var>(<var id="lang_calc_prec_desc"></var>)</label>
					<input type="text" id="control_calc_prec">
				</div>
				<div class="control-group">
					<div>
						<label for="control_calc_value"><var id="lang_calc_expression"></var></label><a id="ins_open_btn" href="javascript:;" class="pull-right">说明</a>
					</div>
					<div>
						<textarea id="control_calc_value" rows="5"></textarea>
					</div>
				</div>
			</form>
			<div id="control_calc_ins" style="display: none;">
				<div>
					<h5>
						计算控件说明
						<button type="button" title="回到控件属性页" class="btn btn-small" id="ins_close_btn"> <i class="glyphicon-home"></i></button>
					</h5>
				</div>
				<div>
					<blockquote>
						<p>
							在日常的工作中，填写表单时，经常会存在一些计算项目，比如金额的计算，比如天数的计算，使用计算控件可以简化人员操作，提高准确性。
						</p>
						<p>以下举例说明计算控件的使用方法(以日历控件计算天数为例)：</p>
					</blockquote>
					<p>首先，先建立好需要参与计算的项目，如图建立好开始时间和结束时间这两个日历控件，当然了每个日历控件都有对应的输入框控件</p>
					<img src="calc1.png" width="100%" height="200">			
					<p>
						接下来点击计算控件按钮，新建一个计算控件，设定时需要输入计算公式，公式的规则就是四则运算规则，可以利用括号和加减乘除，公式的计算项目就是上面
						建立的单行输入框控件的名称，如图：
					</p>
					<img src="calc2.png" width="100%" height="200">			
					<p>上面日期差的实例实现的效果如图，而且<strong>计算控件的输入内容是不允许修改的。</strong></p>
					<img src="calc3.png" width="100%" height="200">	
					<p>
						计算公式支持+ - * / ^和英文括号以及特定计算函数，例如：(数值1+数值2)*数值3-ABS(数值4)，其中数值1、数值2等为表单控件名称。 计算控件支持的函数计算如下：
					</p>
					<ol>
						<li>SUM(数值1,数值2,数值3...) 对所有数值求和; </li>
						<li>AVG(数值1,数值2,数值3) 输出平均值；</li>
						<li>MAX(数值1,数值2,数值3...) 输出最大值,英文逗号分割；</li>
						<li>MIN(数值1,数值2,数值3...) 输出最小值,英文逗号分割；</li>
						<li>ABS(数值1) 输出绝对值；</li>
						<li>RMB(数值1) 输出人民币大写形式，数值范围0～9999999999.99；</li>
						<li>DAY(日期1-日期2) 输出时间差的整数天数；</li>
						<li>HOUR(日期1-日期2) 输出时间差的小时数；</li>
						<li>DATE(日期1-日期2) 输出时间差，形如：xx天xx小时xx分xx秒；</li>
						<li>LIST(列表控件名,第几列) 计算列表控件指定列的和；</li>
					</ol>
					<p>值得说明的是LIST函数，它可以读取列表控件某列数据的和，下面以实例说明一下：</p>

					<p>假如设计的列表控件如下图</p>
					<img src="calc4.png" width="100%" height="200">			
					<p>我们现在用计算控件将价格这一列的数据取出来，添加计算控件，公式书写如下：</p>
					<img src="calc5.png" width="100%" height="200">		
					<p>实现效果如下：</p>
					<img src="calc6.png" width="100%" height="200">		
					<p>LIST函数主要用于列表控件数据参与条件设置的情况。</p>
					<strong>注意：参与日期计算的控件必须为日期类型或者日期+时间类型。</strong>
				</div>
			</div>
		</fieldset>
		<script src="../../../../src/core.js"></script>
		<script src="../../../../src/base.js"></script>
		<script src="../../../../src/common.js"></script>
		<script src="../fc.js"></script>
		<script src="../internal_controls.js"></script>
		<script>
			var G = parent.G;
			(function() {
				var tpl = '<ic data-id="<%=id%>" data-type="calc" data-title="<%=title%>" data-prec="<%=prec%>" data-width="<%=width%>" data-value="<%=value%>" contenteditable="false" >' +
						'<span class="fake-calc" style="width: <%=width%>px" title="<%=title%>"><%=value%></span><input type="hidden" /></ic>',
						fc = new Fc(editor, tpl),
						editing = UE.plugins['formcontrols'].editing,
						oldData;

				// 编辑时， 需要还原各控件的值
				if (editing) {
					oldData = fc.getControlData(editing);
					$G('control_calc_title').value = oldData.title;
					$G('control_calc_value').value = oldData.value || "";
					$G('control_calc_width').value = oldData.width;
					$G('control_calc_prec').value = oldData.prec;
				}

				dialog.onok = function() {
					var data, title = $G('control_calc_title').value;

					if ($.trim(title) === "") {
						alert(editor.getLang("fc.noNameTip"));
						return false;
					}
					var prec = $G('control_calc_prec').value || 4,
							width = $G('control_calc_width').value || 200;

					data = {
						title: title,
						value: $G('control_calc_value').value,
						prec: Number(prec),
						width: Number(width)
					}

					if (editing) {
						data.id = oldData.id;
						fc.updateContorl(editing, data);
						delete UE.plugins['formcontrols'].editing
						dialog.close();
					} else {
						$('body').waitingC();
						$.get(Ibos.app.url('workflow/api/getNextItemID', {id: editor.formid}), function(res) {
							$('body').stopWaiting();
							if (res.isSuccess) {
								data.id = res.id;
								fc.addControl(data);
								dialog.close();
							} else {
								alert(editor.getLang("fc.addError"));
							}
						}, 'json');
					}
					return false;
				};
				// 说明开关
				var calIns = {
					$elem: $("#control_calc_ins"),
					show: function() {
						this.$elem.slideDown(200).siblings().slideUp(200);
					},
					hide: function() {
						this.$elem.slideUp(200).siblings().slideDown(200);
					}
				};
				$("#ins_close_btn").click(function() {
					calIns.hide();
				});
				$("#ins_open_btn").click(function() {
					calIns.show();
				});
			})();
		</script>
	</body>
</html>